<template>
  <div class="container">
    <!-- 错误提示 -->
    <div v-if="errorMessage" class="error-message">{{ errorMessage }}</div>

    <!-- 搜索表单 -->
    <form class="search-form">
      <input v-model="searchForm.trackingNumber" placeholder="跟单编号" class="form-input" />
      <input v-model="searchForm.documentCode" placeholder="单据编码" class="form-input" />
      <input v-model="searchForm.materialCode" placeholder="物料编码" class="form-input" />
      <input v-model="searchForm.materialName" placeholder="物料名称" class="form-input" />
      <select v-model="searchForm.productionLine" class="form-select">
        <option value="">请选择生产线</option>
        <option value="1# 底架加工线">1# 底架加工线</option>
        <option value="2# 底架加工线">2# 底架加工线</option>
        <option value="1# 总装集成线">1# 总装集成线</option>
        <option value="2# 总装集成线">2# 总装集成线</option>
        <option value="包装线">包装线</option>
      </select>

      <input v-model="searchForm.startDate" type="date" class="form-input" />
      <input v-model="searchForm.endDate" type="date" class="form-input" />
      <button type="button" @click="search" class="search-btn">搜索</button>
    </form>

    <!-- 生产数据表格 -->
    <table class="production-table">
      <thead>
        <tr>
          <th>序号</th>
          <th>跟单编号</th>
          <th>订单交期</th>
          <th>单据编码</th>
          <th>单据状态</th>
          <th>物料名称</th>
          <th>物料编码</th>
          <th>主计量</th>
          <th>生产日期</th>
          <th>生产线</th>
          <th>生产数量</th>
          <th>完工数量</th>
          <th>生产进度</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in productionList" :key="item.id">
          <td>{{ index + 1 }}</td>
          <td>{{ item.tu_status }}</td>
          <td>{{ item.tu_Remark }}</td>
          <td>{{ item.id }}</td>
          <td>{{ item.status }}</td>
          <td class="green-text">{{ item.tu_Name }}</td>
          <td>{{ item.material_code }}</td>
          <td>{{ item.producMaterialPiciName }}</td>
          <td>{{ item.production_date }}</td>
          <td>{{ item.production_line }}</td>
          <td>{{ item.production_qty }}</td>
          <td>{{ item.processNumber }}</td>
          <td>
            <div v-for="(step, index) in getProductionSteps(item)" :key="index" class="progress-group">
              <div class="progress-container">
                <div class="progress-bar">
                  <div class="progress-inner"
                    :style="`width: ${step.percent}%; background-color: ${getProgressColor(step.name, step.percent)}`">
                  </div>
                </div>
                <span class="progress-percent">{{ step.name }} - {{ step.percent }}%</span>
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue';
import axios from 'axios';

// 搜索表单数据（与API字段对应）
const searchForm = reactive({
  trackingNumber: '',
  documentCode: '',
  materialCode: '',
  materialName: '',
  productionLine: '',
  startDate: '',
  endDate: '',
  PageIndex: 1,
  PageSize: 15
});

// 生产数据列表
const productionList = ref([]);

// 错误信息
const errorMessage = ref('');

// 预设的生产步骤
const presetSteps = ['车钳', '钻孔', '热处理', '铆钉', '焊接'];

// 获取生产步骤及完成百分比
const getProductionSteps = (item) => {
  const steps = [];
  const processSteps = item.processSteps ? item.processSteps.split('=>') : [];
  presetSteps.forEach((step) => {
    let percent = 0;
    if (processSteps.includes(step)) {
      percent = 100;
    }
    steps.push({ name: step, percent });
  });
  return steps;
};

// 获取进度条颜色的函数
const getProgressColor = (stepName, percent) => {
  if (percent === 0) {
    return 'transparent';
  }
  switch (stepName) {
    case '车钳':
      return '#409EFF';
    case '钻孔':
      return '#f5a623';
    case '热处理':
      return '#909399';
    case '铆钉':
      return '#409EFF';
    case '焊接':
      return '#f5a623';
    default:
      return '#909399';
  }
};

// 搜索方法（关键数据映射修正）
const search = () => {
  axios.get("https://localhost:7006/api/Process/AllcodesQuser", {
    params: {
      PageIndex: searchForm.PageIndex,
      PageSize: searchForm.PageSize,
      Tu_status: searchForm.trackingNumber,
      Id: searchForm.documentCode,
      Material_code: searchForm.materialCode,
      Tu_Name: searchForm.materialName,
      Production_line: searchForm.productionLine,
      KTime: searchForm.startDate,
      JTime: searchForm.endDate,
    }
  }).then((res) => {
    productionList.value = res.data.data.list;
  }).catch((error) => {
    errorMessage.value = '请求出错：' + error.message;
  });
};

// 初始化自动搜索（开发环境可选，生产环境建议手动触发）
onMounted(() => {
  search();
});
</script>

<style scoped>
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.error-message {
  color: #f56c6c;
  font-size: 0.9em;
  margin-bottom: 15px;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.form-input,
.form-select,
.search-btn {
  padding: 8px 12px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  font-size: 14px;
}

.form-select {
  min-width: 150px;
}

.search-btn {
  background-color: #409EFF;
  color: white;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
}

.search-btn:hover {
  background-color: #66b1ff;
}

.production-table {
  width: 100%;
  border: 1px solid #f0f2f5;
  border-collapse: separate;
  border-spacing: 0 8px;
  margin-top: 30px;
  font-size: 14px;
}

.production-table th {
  background-color: #409eff;
  color: white;
  padding: 15px;
  border: 1px solid #409eff;
  text-align: center;
  font-weight: 500;
}

.production-table td {
  padding: 15px;
  border: 1px solid #f0f2f5;
  background: white;
  border-radius: 4px;
}

.status-open {
  color: #f5a623;
}

.status-normal {
  color: #67c23a;
}

.green-text {
  color: #67c23a;
  font-weight: 500;
}

.progress-group {
  margin: 12px 0;
}

.progress-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.progress-bar {
  flex-grow: 1;
  height: 16px;
  border-radius: 8px;
  overflow: hidden;
  background-color: #f0f2f5;
}

.progress-inner {
  height: 100%;
  border-radius: 8px;
}

.progress-percent {
  font-size: 14px;
  color: #606266;
  min-width: 80px;
}

.search-form {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  overflow-x: auto;
  padding: 10px;
  background: #f5f7fa;
  border-radius: 8px;
}

.form-input,
.form-select {
  flex: 1 0 calc(1/7 * 100% - 10px);
  min-width: 120px;
  padding: 8px 12px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  font-size: 14px;
}

.date-group {
  display: flex;
  gap: 5px;
  align-items: center;
}

.date-separator {
  font-size: 16px;
  color: #606266;
}

.search-btn {
  flex: 0 0 auto;
  min-width: 80px;
  background-color: #409eff;
  color: white;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
}

@media (max-width: 1024px) {

  .form-input,
  .form-select {
    flex: 1 0 calc(1/6 * 100% - 10px);
    font-size: 13px;
  }

  .production-table {
    width: 100%;
    border: 1px solid #f0f2f5;
    border-collapse: separate;
    border-spacing: 0 8px;
    margin-top: 30px;
    font-size: 14px;
    table-layout: fixed;
    /* 固定表格布局 */
  }

  .production-table th {
    background-color: #409eff;
    color: white;
    padding: 15px;
    border: 1px solid #409eff;
    text-align: center;
    font-weight: 500;
    min-width: 60px;
    /* 各表头最小宽度 */
    word-wrap: break-word;
    /* 表头内容换行 */
  }

  .production-table td {
    padding: 15px;
    border: 1px solid #f0f2f5;
    background: white;
    border-radius: 4px;
    word-wrap: break-word;
    /* 单元格内容自动换行 */
  }

  /* 针对生产进度列单独设置更宽的最小宽度 */
  .production-table td:last-child {
    min-width: 180px;
  }

}
</style>